<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>快捷业务</title>

    <link href="css/stylePlus.css" rel="stylesheet">
	<link rel="stylesheet" href="../media/jquery.mCustomScrollbar/css/jquery.mCustomScrollbar.css" type="text/css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
	<div class="Current_position">
    	<img src="../media/image/dingwei.png"/><span>当前所在的位置：</span><a href="javascript:;">快捷业务</a>
    </div>
    <div class="kj_box">
      <div class="id_box">
        <div class="id_title">身份证照</div>
        <div class="id_pic">
          <div class="idpic_face"></div>
          <div class="idpic_face_reverse"></div>
          <div class="id_icon"></div>
        </div>
      </div>
      <div class="kj_gundong">
      <div class="kj_list">
          <div class="kj_item">
            <div class="kj_icon kj_icon01"></div>
            <div class="kj_title">发送信息</div>
          </div>
          <div class="kj_item">
            <div class="kj_icon kj_icon02"></div>
            <div class="kj_title">办理证明</div>
          </div>
          <div class="kj_item">
            <div class="kj_icon kj_icon03"></div>
            <div class="kj_title">办理低保</div>
          </div>
          <div class="kj_item">
            <div class="kj_icon kj_icon04"></div>
            <div class="kj_title">办理养老保险</div>
          </div>
          <div class="kj_item">
            <div class="kj_icon kj_icon05"></div>
            <div class="kj_title">办理医疗保险</div>
          </div>
          <div class="kj_item">
            <div class="kj_icon kj_icon06"></div>
            <div class="kj_title">办理重疾申请</div>
          </div>
          <div class="kj_item">
            <div class="kj_icon kj_icon07"></div>
            <div class="kj_title">办理再就业申请</div>
          </div>
          <div class="kj_item">
            <div class="kj_icon kj_icon08"></div>
            <div class="kj_title">办理殡葬</div>
          </div>
        </div>
      </div>
	<div>
      <!--弹出二级列表start-->
      <div id="slt_box" class="slt_box">
        <div class="slt_header">
          <span class="slt_title">请选择办理类型</span>
          <span class="slt_close">X</span>
        </div>
        <div class="slt_content">
          <div class="kj_subitem">
            <div class="kj_subicon kj_subicon01"></div>
            <div class="kj_subtitle">证照验真</div>
          </div>
          <div class="kj_subitem">
            <div class="kj_subicon kj_subicon02"></div>
            <div class="kj_subtitle">出租户证明</div>
          </div>
          <div class="kj_subitem">
            <div class="kj_subicon kj_subicon03"></div>
            <div class="kj_subtitle">户口迁入证明</div>
          </div>
          <div class="kj_subitem">
            <div class="kj_subicon kj_subicon04"></div>
            <div class="kj_subtitle">婚育证明</div>
          </div>
          <div class="kj_subitem">
            <div class="kj_subicon kj_subicon05"></div>
            <div class="kj_subtitle">居住证明</div>
          </div>
          <div class="kj_subitem">
            <div class="kj_subicon kj_subicon06"></div>
            <div class="kj_subtitle">亲属关系证明</div>
          </div>
          <div class="kj_subitem">
            <div class="kj_subicon kj_subicon07"></div>
            <div class="kj_subtitle">申请办理残疾证明</div>
          </div>
          <div class="kj_subitem">
            <div class="kj_subicon kj_subicon08"></div>
            <div class="kj_subtitle">特殊情况</div>
          </div>
          <div class="kj_subitem">
            <div class="kj_subicon kj_subicon09"></div>
            <div class="kj_subtitle">一般补办独生子女证所需条件</div>
          </div>
          <div class="kj_subitem">
            <div class="kj_subicon kj_subicon10"></div>
            <div class="kj_subtitle">政策外怀孕人工终止妊娠证明</div>
          </div>
          <div class="kj_subitem">
            <div class="kj_subicon kj_subicon11"></div>
            <div class="kj_subtitle">独生子女证补证证明</div>
          </div>
        </div>
      </div>
      <!--弹出二级列表end-->
      <!--遮罩层-->
      <div id="overlay"></div>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="../media/jquery.mCustomScrollbar/js/jquery.mCustomScrollbar.concat.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      /* 显示遮罩层 */
      function showOverlay() {
          $("#overlay").height(pageHeight());
          $("#overlay").width(pageWidth());
          //alert(pageHeight());
          // fadeTo第一个参数为速度，第二个为透明度
          // 多重方式控制透明度，保证兼容性，但也带来修改麻烦的问题
          $("#overlay").fadeTo(200, 0.5);
      }

      /* 隐藏覆盖层 */
      function hideOverlay() {
          $("#overlay").fadeOut(200);
      }

      /* 当前页面高度 */
      function pageHeight() {
          //return document.body.scrollHeight;
          return window.scrollHeight;
      }

      /* 当前页面宽度 */
      function pageWidth() {
          return document.body.scrollWidth;
      }

      /* 定位到页面中心 */
        function adjust(id) {
            var w = $(document.getElementById(id)).width();
            var h = $(document.getElementById(id)).height();
            var t = scrollY() + (windowHeight()/2) - (h/2);
            if(t < 0) t = 0;
            
            var l = scrollX() + (windowWidth()/2) - (w/2);
            if(l < 0) l = 0;
            $(document.getElementById(id)).css({left: l+'px', top: t+'px'});
        }

        //浏览器视口的高度
        function windowHeight() {
            var de = document.documentElement;
            return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
        }

        //浏览器视口的宽度
        function windowWidth() {
            var de = document.documentElement;
            return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth
        }

        /* 浏览器垂直滚动位置 */
        function scrollY() {
            var de = document.documentElement;
            return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
        }

        /* 浏览器水平滚动位置 */
        function scrollX() {
            var de = document.documentElement;
            return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
        }

      $(document).ready(function(){

        //点击一级项目展示二级项目
        $(".kj_icon01").click(function(){
          showOverlay();
          adjust("slt_box");
          $(".slt_box").slideDown();
        });

        $(".slt_close").click(function(){
          $(".slt_box").slideUp();
          hideOverlay(); 
        });

        //showOverlay();
        //adjust("slt_box");
		$(window).load(function(){
				$(".kj_gundong").mCustomScrollbar({
					axis:"x",
					theme:"3d"//可以在这里修改主题
				});
			});
        
      });
	  
    </script>
  </body>
</html>